<template>
  <a-modal
      :open="visible"
      :footer="null"
      :maskClosable="false"
      :closable="false"
      width="720px"
      @cancel="onClose"
  >
    <template #title>
      <div style="display:flex;justify-content:space-between;align-items:center;width:100%">
        <div style="font-weight:600;color:#0a4c2a">选择要评分的同事</div>
        <a-button type="link" @click="onClose" style="color: rgba(0,0,0,0.45);padding:0">关闭</a-button>
      </div>
    </template>

    <div class="ps-container">
      <div class="ps-toolbar">
        <a-input
            v-model:value="keyword"
            :bordered="false"
            placeholder="搜索"
            allow-clear
            class="ps-search"
            :prefix="h(SearchOutlined)"
        />
        <a-select
            v-model:value="selectedDept"
            :bordered="false"
            class="ps-dept"
        >
          <a-select-option :value="ALL_DEPT_VALUE">所有</a-select-option>
          <a-select-option v-for="d in departments" :key="d.id || d.value || d" :value="d.id || d.value || d">
            {{ d.name || d.label || d }}
          </a-select-option>
        </a-select>
      </div>

      <div class="ps-list-wrap">
        <div class="ps-list-title">同事</div>
        <a-list :data-source="filteredUsers" :split="false">
          <template #renderItem="{ item }">
            <a-list-item class="ps-item">
              <a-checkbox v-model:checked="checkedMap[item.id]" />
              <a-avatar :src="item.avatar" size="large" style="margin:0 12px"/>
              <div class="ps-meta">
                <div class="ps-name">{{ item.name }}</div>
                <div class="ps-sub">{{ item.dept || item.department }} <span v-if="item.email"> · {{ item.email }}</span></div>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>

    <div class="ps-footer">
      <a-button type="primary" style="background:#146c43" @click="onConfirm">确定</a-button>
    </div>
  </a-modal>
  
</template>

<script setup>
import {ref, reactive, computed, defineExpose, h} from "vue";
import {SearchOutlined} from "@ant-design/icons-vue";

const props = defineProps({
  users: { type: Array, default: () => [] }, // [{id,name,dept,email,avatar}]
  departments: { type: Array, default: () => [] },
  defaultSelected: { type: Array, default: () => [] }, // [id]
});

const emit = defineEmits(["confirm", "close"]);

const visible = ref(false);
const keyword = ref("");
const ALL_DEPT_VALUE = "__ALL__";
const selectedDept = ref(ALL_DEPT_VALUE);
const checkedMap = reactive({});

function open(initialSelected = []){
  visible.value = true;
  keyword.value = "";
  selectedDept.value = ALL_DEPT_VALUE;
  Object.keys(checkedMap).forEach(k => delete checkedMap[k]);
  [...(initialSelected?.length ? initialSelected : props.defaultSelected)].forEach(id => {
    checkedMap[id] = true;
  });
}

function onClose(){
  visible.value = false;
  emit("close");
}

const filteredUsers = computed(() => {
  const k = keyword.value.trim().toLowerCase();
  const dept = selectedDept.value;
  return (props.users || []).filter(u => {
    const okKw = !k || [u.name, u.email, u.dept, u.department].filter(Boolean).join(" ").toLowerCase().includes(k);
    const okDept = dept === ALL_DEPT_VALUE || (u.dept || u.department) === dept || u.deptId === dept || u.departmentId === dept;
    return okKw && okDept;
  });
});

function onConfirm(){
  const ids = Object.keys(checkedMap).filter(id => checkedMap[id]);
  emit("confirm", ids);
  visible.value = false;
}

defineExpose({ open });
</script>

<style scoped lang="scss">
.ps-container{ border:1px solid #e5e5e5; border-radius:4px; padding:12px; }
.ps-toolbar{ display:flex; gap:12px; }
.ps-search{ flex: 0 0 280px; background:#f5f7f5; }
.ps-dept{ flex: 0 0 220px; background:#f5f7f5; }
.ps-list-wrap{ margin-top:16px; }
.ps-list-title{ margin:8px 0 12px; font-weight:600; }
.ps-item{ display:flex; align-items:center; padding:8px 4px; }
.ps-meta{ display:flex; flex-direction:column; }
.ps-name{ font-weight:500; }
.ps-sub{ color: rgba(0,0,0,0.45); font-size:12px; }
.ps-footer{ display:flex; justify-content:flex-end; margin-top:16px; }
</style>


